<template>
  <div class="container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <div class="registry_steps">
      <div class="step_header">公司注册基本流程</div>
      <div v-for="(item,i) in steps" :key="i" class="step_item">
        <div class="descption">
          <div class="step_num">{{item.num}}.</div>
          <div class="step_name">
            <div>{{item.name}}</div>
            <div class="desc">{{item.desc}}</div>
          </div>
        </div>
        <div class="img_show"></div>
      </div>
    </div>

    <div class="search_name">
      <div class="tip">先查一下公司名称是否可用？</div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-field v-model="form.name" name="公司名称" label="公司名称" placeholder="填写想要查询的公司名称" />
          <van-field v-model="form.phone" type="number" name="手机号码" label="手机号码" placeholder="填写您的手机号码" />
          <div class="search_btn_container">
            <van-button size="small" type="danger" native-type="submit" :loading="loading" loading-text="查询中...">立即查询</van-button>
          </div>
          <div class="results">
            &lt; 最新查询结果 &gt;
          </div>

          <div id="scroll">
            <ul id="con1" ref="con1" :class="{anim:animate==true}">
              <li v-for='item in scrolls' :key="item.name">
                <div class="phone">{{item.phone}}</div>
                <div class="name">{{item.name}}</div>
                <div class="rate high" v-if="item.rate>90">{{item.rate}}%通过率</div>
                <div class="rate middle" v-if="80<item.rate&&item.rate<=90">{{item.rate}}%通过率</div>
                <div class="rate low" v-if="item.rate<=80">{{item.rate}}%通过率</div>
              </li>
            </ul>
          </div>
        </van-form>
      </div>

    </div>
    <div class="problems">
      <div class="pro_header">注册公司遇到的问题?</div>
      <div v-for="item in problems" :key="item.num" class="pro_item">
        {{item.num}}、{{item.desc}}
      </div>

      <div class="service">鑫山财务为您提供一站式解决方案！</div>
      <div class="service_btns">
        <div class="btn_chat"><van-icon name="chat-o" />免费通话</div>
        <div class="btn_tel"><van-icon name="phone-o" />电话咨询</div>
      </div>
    </div>

    <Asider></Asider>
    <Footer></Footer>

  </div>
</template>

<script>
import Footer from "@/components/footer";
import Asider from "@/components/asider";
export default {
  components: {
    Footer,
    Asider
  },
  data() {
    return {
      loading: false,
      banner: [
        {
          id: 1,
          path: "../assets/image/collect_icon.png",
        },
        {
          id: 2,
          path: "../assets/image/collect_icon.png",
        },
        {
          id: 3,
          path: "../assets/image/collect_icon.png",
        },
      ],
      steps: [
        {
          num: 1,
          name: "公司核名",
          desc: "准备待核准的公司名称，并提交给工商部门",
        },
        {
          num: 2,
          name: "提交设立资料",
          desc: "将准备好的设立资料提交到工商部门",
        },
        {
          num: 3,
          name: "领取营业执照",
          desc: "工商部门受理通过后就可以去领取营业执照",
        },
        {
          num: 4,
          name: "刻制印章",
          desc: "到正规的印章刻制点备案并刻必须的印章(通常为：公章、财务章、法人章)",
        },
        {
          num: 5,
          name: "银行开户",
          desc: "到银行开设公司对公账户",
        },
        {
          num: 6,
          name: "税务备案",
          desc: "到税务机关备案、税种核定、备案后可以申领发票",
        },
      ],
      form: {
        name: "",
        phone: "",
      },
      animate: false,
      scrolls: [
        { phone: "156****8497", rate: "80", name: "合肥**传媒" },
        { phone: "154****8586", rate: "95", name: "合肥云**有限公司" },
        { phone: "186****8598", rate: "88", name: "合肥洋**有限公司" },
        { phone: "155****5555", rate: "70", name: "合肥东**贸易有限公司" },
        { phone: "178****8856", rate: "95", name: "合肥机**有限公司" },
        { phone: "189****8457", rate: "93", name: "合肥自**有限公司" },
        { phone: "182****7253", rate: "63", name: "合肥**劳务有限公司" },
        { phone: "185****5785", rate: "70", name: "合肥**有限公司" },
      ],
      problems: [
        {
          num: 1,
          desc: "核名总是通不过？总是重名？不合规范？",
        },
        {
          num: 2,
          desc: "不清楚流程？不知道如何着手办理？",
        },
        {
          num: 3,
          desc: "经营范围如何填写？为何总是被驳回？",
        },
        {
          num: 4,
          desc: "资料提交错误？多次注册不成功？",
        },
        {
          num: 5,
          desc: "核名总是通不过？总是重名？不合规范？",
        },
        {
          num: 6,
          desc: "核名总是通不过？总是重名？不合规范？",
        },
        {
          num: 7,
          desc: "核名总是通不过？总是重名？不合规范？",
        },
        {
          num: 8,
          desc: "核名总是通不过？总是重名？不合规范？",
        },
      ],
    };
  },
  created() {
    setInterval(this.scroll, 4000);
  },
  methods: {
    onSubmit() {
      if (this.form.name == "" || this.form.phone == "") {
        this.$toast("请填写公司名称与手机号！");
      } else {
        // 查询接口
        this.loading = true;
      }
    },

    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.scrolls.push(this.scrolls[0]); // 将数组的第一个元素添加到数组的
        this.scrolls.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 800);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding-bottom: 5rem;
}
.my-swipe {
  height: 22rem;
}
.my-swipe .van-swipe-item {
  width: 100%;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}

.registry_steps {
  padding: 0 1.5rem;
  .step_header {
    height: 8rem;
    line-height: 8rem;
    color: rgb(3, 60, 165);
    text-align: center;
  }
  .step_item {
    display: flex;
    height: 8rem;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    .descption {
      flex: 2;
      display: flex;
      .step_num {
        color: rgb(243, 51, 51);
        flex: 0.6;
        font-style: italic;
        display: flex;
        justify-content: center;
      }
      .step_name {
        flex: 5;
        padding: 0.2rem 0;
        font-size: 1rem;
        color: #333;
        padding: 0 2.5rem 0 0;
        .desc {
          color: #999;
        }
      }
    }
    .img_show {
      flex: 0.7;
      background-color: #abcdef;
    }
  }
}

.search_name {
  background-color: #333;
  .tip {
    height: 5rem;
    line-height: 5rem;
    color: #fff;
    text-align: center;
    font-size: 1.7rem;
  }

  .form {
    padding: 0 2rem;
    .search_btn_container {
      margin-top: 1rem;
      text-align: center;
    }

    .results {
      color: #fff;
      text-align: center;
      margin-top: 1rem;
    }

    #scroll {
      height: 10rem;
      margin-top: 2rem;
      overflow: hidden !important;
    }
  }
}

.anim {
  transition: all EASE 0.8s;
  margin-top: -2rem;
}
#con1 li {
  list-style: none;
  line-height: 2rem;
  height: 2rem;
  color: #fff;
  display: flex;
  .phone {
    flex: 1.2;
  }
  .name {
    flex: 1.8;
  }
  .rate {
    flex: 1;
  }
}

.high {
  color: green;
}

.middle {
  color: rgb(221, 184, 18);
}

.low {
  color: red;
}
.problems{
  padding: 0 1rem;
}
.pro_header {
  color: #17a3fa;
  text-align: center;
  font-size: 1.3rem;
  height: 5rem;
  line-height: 5rem;
}
.pro_item{
  height: 2.5rem;
  line-height: 2.5rem;
  border: 1px solid #eee;
  border-radius: 3rem;
  margin-bottom: .5rem;
  padding: 0 .7rem;
}

.service{
  margin-top: 1rem;
  text-align: center;
  color: #f58b01;
}
.service_btns{
  display: flex;
  color: #fff;
  justify-content: space-evenly;
  margin-top: 1rem;
  text-align: center;
  .btn_chat{
    padding: .2rem 0;
    width: 25vw;
    background-color: rgb(92, 131, 240);
    border-radius: .4rem;
  }
  .btn_tel{
    padding: .2rem 0;
    width: 25vw;
    border-radius: .4rem;
    background-color: rgb(185, 6, 6);
  }
}
</style>